<template>

  <el-row class="login" type="flex" :style="login" justify="center" align="middle">
    <el-col
      :xs="14"
      :sm="12"
      :md="10"
      :lg="8"
      :xl="6"
    >
      <el-form
        label-position="left"
        :model="registerForm"
        :rules="rules"
        ref="loginForm"
        label-width="80px"
        class="login-form"
      >
        <div style="height: 100px;text-align: center;">
          <span style="font-size: 30px;">用户注册</span>
        </div>
        <el-form-item label="姓名" prop="userName" >
          <el-input v-model="registerForm.userName"></el-input>
        </el-form-item>
        <el-form-item
          label="账户" prop="account" >
          <el-input  v-model="registerForm.account"></el-input>
        </el-form-item>
        <el-form-item
          label="密码" prop="password" >
          <el-input v-model="registerForm.password"></el-input>
        </el-form-item>
        <el-form-item
          label="性别" prop="gender" >
          <el-input  v-model="registerForm.gender"></el-input>
        </el-form-item>
        <el-form-item
          label="年龄" prop="age" >
          <el-input  v-model="registerForm.age"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号" prop="phone" >
          <el-input  v-model="registerForm.phone"></el-input>
        </el-form-item>
        <el-form-item
          label="身份证" prop="pid" >
          <el-input  v-model="registerForm.pid"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            class="green"
            @click="submitForm"
          >注册</el-button>
          <el-button class="green" @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

</template>

<script>

import axios from 'axios'
export default {

  data () {
		var checkPhone = (rule, value, callback) => {
		  const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
		  if (!value) {
		    return callback(new Error('电话号码不能为空'))
		  }
		  setTimeout(() => {
		    // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
		    // 所以我就在前面加了一个+实现隐式转换

		    if (!Number.isInteger(+value)) {
		      callback(new Error('请输入数字值'))
		    } else {
		      if (phoneReg.test(value)) {
		        callback()
		      } else {
		        callback(new Error('电话号码格式不正确'))
		      }
		    }
		  }, 100)
		}
    return {
      login: {
        backgroundImage: "url(" + require("../assets/img/login04.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
        height: "100vh",
      },
      // 表单数据
      loginForm: {
        adminName : null,
        password:null,
        loginType:null
      },
      registerForm: {
        userName:null,
        password:null,
        gender:null,
        age:null,
        phone:null,
        pid:null,
        account:null
      },
      formData:{
        logintype:1
      },
			user:null,
      admin:null,
			familyTouPic:'',
			familyPhone:'',
			oldId:'',
      customer:'',
      customerId:'',
      name:'',
      customerPhone:'',
      // 表单验证规则
      rules: {
      //   userName: [
			// 	{ required: true, message: '请输入账户', trigger: 'blur' },
      //     { min: 4, max: 20, message: '账户长度为4-20个字符', trigger: 'blur' },
			//   { required: true, trigger: 'blur'}
			// ],
        account: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 4, max: 20, message: '账户长度为4-20个字符', trigger: 'blur' }
        ],
        pid: [
          { required: true, message: '请输入身份证', trigger: 'blur' },
          { min: 18, max: 18, message: '身份证长度为18个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 20, message: '密码长度为4-20个字符', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '姓名长度为2-5个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请输入性别', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur' }
        ],




        // password: [
        //   { required: true, message: '请输入密码', trigger: 'blur' },
        //   { min: 4, max: 20, message: '密码长度为4-20个字符', trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    back(){
      this.$router.push('/');
    },
	  resetForm(){
		  this.loginForm.adminName=''
		  this.loginForm.password=''
	  },
    register(){
	    this.$router.push("/userRegister");
    },
      submitForm () {

      for(let key in this.registerForm){
        console.log(this.registerForm[key] )
        if(this.registerForm[key] == null){
          this.$message({
            type: 'error',
            message: '信息填写不完整'
          })
          return;
        }
      }

        var _this = this

        axios.post('restful/user/userRegister',
          _this.registerForm,
          {
            headers: {
              'content-type': 'application/json'
            },
            withCredentials: true
	      }).then(function (response) {
					console.log(response)
					if(response.data.result){
              _this.$message({
                type: 'success',
                message: '注册成功'
              })
            // _this.$router.push("/login")
          }
	    })
	      .catch(function (error) {
	        console.log(error)
	      })

    }
  }
}
</script>

<style scoped>

/*.login {*/
/*  height: 100vh;*/
/*  background-color: #52BAB5;*/
/*}*/

.login-form {
  padding: 25px;
  border-radius: 15px;
  background-color: #fff;
}
.green{
  background-color: #409EFF;
  color: #fff;
}
</style>
